<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script>
    // 一. 添加信息

    // 1. 准备数据（对象数组）
    const arr = []

    // 2. 获取元素
    const ipt1 = document.querySelector('.uname')
    const ipt2 = document.querySelector('.age')
    const sel1 = document.querySelector('.gender')
    const ipt3 = document.querySelector('.salary')
    const sel2 = document.querySelector('.city')
    const add = document.querySelector('.add')
    const tbody = document.querySelector('tbody')

    // 3. 给录入按钮添加点击事件
    add.addEventListener('click', function (e) {
      // 阻止表单刷新
      e.preventDefault()
      // 4. 在事件中获取表单的值、组装一个对象添加至数组
      // 非空校验
      if (ipt1.value === '' || ipt2.value === '' || ipt3.value === '') {
        return alert('输入框不能为空')
      }
      arr.push({
        id: Date.now(),// 时间戳为id值，不重复即可
        name: ipt1.value,// 名字
        age: ipt2.value,// 年龄
        gender: sel1.value,// 性别
        salary: ipt3.value,// 工资
        city: sel2.value // 城市
      })
      // console.log(arr)
      // 5. 调用 render 函数做列表渲染
      render()
      // 6. 输入输入框
      ipt1.value = ipt2.value = ipt3.value = ''
    })

    // 封装函数(列表渲染)
    function render () {
      // 清空 tbody 的所有内容
      tbody.innerHTML = ''
      // 遍历 arr 数组
      for (let i = 0; i < arr.length; i++) {
        // 每遍历一次，创建一个空的tr
        const tr = document.createElement('tr')
        const item = arr[i]
        // 给tr加内容
        tr.innerHTML = `
          <td>${i + 1}</td>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-index="${i}">删除</a>
          </td>
        `
        // 把tr追加到tbody中
        tbody.appendChild(tr)
      }
    }

    // 二. 删除功能
    // 1. 事件委托给tbody添加点击事件（委托a标签的事件）
    tbody.addEventListener('click', function (e) {
      // 注意：凡是标签是后来才放到网页上，并且某些标签还需要添加事件，我们不会直接给标签
      // 本身添加事件，而是通过事件委托的方式添加给之前就已经在网页上的标签，
      // 这才是事件委托的正确打开方式
      // 2. 通过 e.target.tagName 判断点击的是不是a
      if (e.target.tagName === 'A') {
        // 3. 找到要删除的对象在数组中的下标，从数组中删除
        const idx = +e.target.dataset.index
        arr.splice(idx, 1)
        // 4. 调用 render() 函数即可
        render()
      }
    })


  </script>

</body>

</html>